<script lang="ts" setup>
import { getSvg } from "@/utils";
interface NumberItem {
  count: number | string;
  numbers: string[];
}

interface NumberGroup {
  title: string;
  data: NumberItem[];
}
const props = defineProps({
  showMoreResults: {
    type: Boolean,
    default: true
  },
  item: {
    type: Object as () => NumberGroup,
    default: () => {}
  }
});
</script>
<template>
  <div class="w-full b-1 b-solid b-#CCE6FF rounded-8">
    <div
      class="w-full h-47 lh-47 bg-[#CCE6FF] rounded-lt-8 rounded-rt-8 font-bold text-14 color-[#004D8E] text-center not-italic"
    >
      {{ item.title }}
    </div>
    <div class="w-full h-auto bg-[#F6FBFF] rounded-rb-8 rounded-lb-8">
      <div class="h-60 flex justify-start items-center">
        <div
          class="flex-[1] font-400 text-14 color-[#414141] lh-16 text-center not-italic"
        >
          จำนวนครั้ง
        </div>
        <div
          class="flex-[1] font-400 text-14 color-[#414141] lh-16 text-center not-italic"
        >
          เลขที่ออก
        </div>
      </div>

      <div
        v-for="(obj, idx1) in item.data"
        :key="idx1"
        :class="['px-10', idx1 === item.data.length - 1 ? 'mb-0' : 'mb-5']"
      >
        <div class="bg-[#EBF5FF] rounded-8">
          <div
            class="flex items-stretch font-400 text-14 color-[#414141] lh-16 text-center not-italic"
          >
            <div class="h-27 lh-27 flex-[1]">{{ obj?.count }}</div>
            <div
              class="flex-[1] flex justify-start items-center flex-wrap pr-44"
            >
              <div
                v-for="(num, idx2) in obj?.numbers"
                class="h-27 lh-27 flex justify-around items-center w-25%"
              >
                <div class="w-25">{{ num }}</div>
                <div class="w-8 center">
                  <van-divider
                    v-if="
                      idx2 != obj?.numbers?.length - 1 &&
                      obj?.numbers?.length > 1 &&
                      (idx2 + 1) % 4 != 0
                    "
                    vertical
                    :style="{
                      borderColor: '#C5C5C5',
                      height: '12px',
                      '--van-divider-vertical-margin': '0'
                    }"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-49 center" v-if="showMoreResults">
        <span
          class="font-400 text-14 color-[#444] lh-16 text-center not-italic"
          >{{ $t("title23") }}</span
        >
        <img class="w-31 h-20" :src="getSvg('Frame_582')" alt="" />
      </div>
    </div>
  </div>
</template>
